<template>
  <div>
    <el-row id="artList" type="flex" justify="space-around">
        <el-col :span="16">
        <el-row class="art-item">
          <el-card shadow="hover">
            <h5><div class="art-title">Java String</div></h5>
            <el-row style="display: flex" class="art-info d-flex align-items-center justify-content-start">
                <div class="art-author"><i class="el-icon-user-solid"></i>: wyg</div>
                <div class="art-time"><i class="el-icon-time"></i>：2020-06-12</div>
            </el-row>
            <el-row class="art-body">
                <div class="side-img hidden-sm-and-down"><img class="art-banner" src="http://cdn.wygandwdn.cn/08icFGUS017alAF.png"></div>
                <div class="side-abstract">
                <div class="art-abstract">
                    Java基础，String类源码解析
                </div>
                <div class="art-more">
                    <el-button plain @click="readAll()">阅读全文</el-button>
                    <div class="like" style="margin-right: -300px">
                    <img style="margin-right: 5px" width="15px" height="15px" src="../../assets/like.png">90
                    </div>
                    <div class="view"><i class="el-icon-view"></i>10000</div>
                </div>
                </div>
            </el-row>
          </el-card>
        </el-row>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    Essays: {}
  },
  methods: {
    readAll () {
    }
  }
}
</script>

<style lang="less" scoped>
.artList{
  width: 100%;
}
#side .item {margin-bottom: 30px;}
.art-item {
  margin-bottom: 30px;
  margin-right: 200px;
  position: relative;
  width: 1013px;
}
img.tag {
width: 16px;
height: 16px;
}
.art-title {
border-left: 3px solid #F56C6C;
padding-left: 5px;
cursor: pointer;
}
.art-title:hover {
padding-left: 10px;
color: #409EFF;
}
.art-time {
margin-right: 20px;
}
.art-author {
margin-right: 20px;
}
.art-body {
display: flex;
padding: 10px 0;
}
.side-img {
height: 150px;
width: 270px;
overflow: hidden;
margin-right: 10px;
}

img.art-banner {
width: 100%;
height: 100%;
transition: all 0.6s;
}
img.art-banner:hover {
transform: scale(1.4);
}

.side-abstract {
flex: 1;
display: flex;
flex-direction: column;
}
.art-abstract {
flex: 1;
color: #aaa;
}
.art-more {
height: 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.art-more .view {
color: #aaa;
}
.art-more .like {
color: #aaa;
}
h5{
font-size: 18px;
}
.pagination {
background-color: #F9F9F9;
}
</style>
